<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
		/* 练习: 1.圆形  
		      思路1. 圆形: 宽高与边框倒角一致
			*/
				div#circle{
					width: 400px;
					height: 400px;
					border: 1px solid red;
					border-radius: 400px;  /* 50% */
					/* 边框阴影: box-shadow  属性 */
					box-shadow: 5px 5px 50px 5px red inset;
				}
				/* 练习: 2.正三角形
				思路2. div#trangle css中  抓到div 左边框:  50px实线红色
											              右边框: 50px实线黄色
														  下边框: 50px实线黑色
								注意:先不加宽高	transparent 透明色	*/
				div#trangle{
					width: 0px;
					border-left: 50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 50px solid black;
				}
				/* 使用两行实现倒三角  蓝色 透明度为.3 
				   提醒: 所有边框设置为 50px solid transparent
				        上边框颜色改为蓝色   0,0,255,.3
				   */
				div#Trangle{
					width: 0px;
					border: 50px solid transparent;
					border-top-color: rgba(0, 0, 255, .3);
				}
				
				/* outline  边框轮廓 只针对input元素 */
				input{
					outline: 1px solid red;
				}
				/*  实际应用: 通配选择器 去掉轮廓 
				   *{ outline: 0;} 
				   */
			</style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="trangle"></div>
		<div id="Trangle"></div>
		边框: <input type="text">
	</body>
</html>